<template>
    <!-- 最外层只能有一个组件，不能出现多个 -->
    <div class="demo-basic-vueStudyChild-sassDemo">
        <div class="header">
            <a class="urllink">我是链接</a>
        </div>

        <div class="context">
            <Button type="primary" class="myBtn">Primary</Button>
        </div>

        <!-- 显示JavaScript代码 -->
        <pre>
            <code class="css" v-text="codeCss">
            </code>
        </pre>
        <!-- 显示HTML代码 -->
        <pre>
            <code class="html" v-text="codeHtml">
            </code>
        </pre>
    </div>


</template>

<script>
    import hljs from 'highlight.js'

    export default {
        // 组件被挂载的时候执行的方法
        mounted: function () {
            window.setTimeout(function () {
                $('.demo-basic-vueStudyChild-sassDemo pre code').each(function (i, block) {
                    hljs.highlightBlock(block)
                })
            }, 200)
        },
        data: function () {
            return {
                codeHtml: `
      <div class="demo-basic-vueStudyChild-sassDemo">
        <div class="header">
            <a class="urllink">我是链接</a>
        </div>

        <div class="context">
            <Button type="primary" class="myBtn">Primary</Button>
        </div>
    </div>
        `,
                codeCss: `
    .demo-basic-vueStudyChild-sassDemo {
        .header {
            a.urllink {
                color: red;
                &:hover {
                    color: gold;
                }
            }
        }

        .context {
            .myBtn {
                background: greenyellow;
            }
        }
    }
          `,
            }
        }
    }
</script>

<style scoped lang="scss">
    /***
    scoped ： 表示当前写的样式是针对当前页面的，对其他页面没有影响
    lang="scss": 表示我写的样式代码是针对SASS的，不是less等。强调，属性的值是scss
    ***/
    .demo-basic-vueStudyChild-sassDemo {
        .header {
            a.urllink {
                color: red;
                &:hover {
                    color: gold;
                }
            }
        }

        .context {
            .myBtn {
                background: greenyellow;
            }
        }
    }
</style>
